<template>
  <div>
    <div @click="showFn">{{currentTemp}}</div>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="data.columns"
        :defaultIndex='defaultIndex'
        @cancel="cancelFn"
        @confirm="confirmFn"
      />
    </van-popup>
  </div>
</template>

<script>
	export default {
    name: 'Choose',
    props: ['data'],
	  data() {
      return {
        currentTemp: '请选择',
        show: false,
        defaultIndex: 0,
      }
    },
    mounted() {
    },
    watch: {
      'data.showArea': function(val) {
        this.showDefault()
      },
      'data.columns': function(val) {
        this.showDefault()
      },
      deep: true
    },
    created() {
      this.showDefault()
    },
    methods: {
      showFn() {
        this.show = true
      },
      cancelFn() {
        this.show = false
      },
      confirmFn(item, index) {
        this.currentTemp = item.text
        this.$emit('getId', item.id, item.text)
        this.show = false;
      },
      showDefault() {
        this.currentTemp = this.data.showArea
        this.defaultIndex = this.data.defaultIndex
      }
    },
  }
</script>

<style lang="scss" scoped>
</style>
